<!-- 分类参数 -->
<template>
  <div>
         <!-- 面包屑部分 -->
      <el-breadcrumb separator="/" class="header">
            <el-breadcrumb-item >首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类参数</el-breadcrumb-item>
       </el-breadcrumb>
    
      <!-- 卡片 -->
      <el-card>
           <el-alert title="警告 只能为第三级设置参数" type="error" effect="dark" center></el-alert>
           <!-- 级联选择器 -->
           <div class="smallbox">
             商品名称
               <el-cascader
                  :show-all-levels="false"
                  v-model="value"
                  :options="options"
                  :props=" defaultprop"
                  @change="handleChange">
              </el-cascader>
           </div>
          <!--tabs栏  -->
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="tabs">
            <el-tab-pane label="用户管理" name="first">
                <el-button type="danger" @click="addmany">添加动态参数</el-button>
                <!--动态参数的表格  row代表一项数据-->
                <el-table
                :data="manyarr"
                border
                style="width: 100%">
                   <el-table-column type="expand">
                    <template slot-scope="props">
                          <el-tag
                          :key="index"
                          v-for="(tag,index) in props.row.attr_vals"
                          closable
                          :disable-transitions="false"
                          @close="handleClose(props.row.attr_vals,props.row,tag)">
                          {{tag}}
                        </el-tag>
                        <el-input
                          class="input-new-tag"
                          v-if="inputVisible"
                          v-model="inputValue"
                          ref="saveTagInput"
                          size="100px"
                          @keyup.enter.native="handleInputConfirm(props.row)"
                          @blur="handleInputConfirm"
                        >
                        </el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput(props.row)">+ New Tag</el-button>
                    </template>
                   </el-table-column>
                  <el-table-column
                    prop="attr_name"
                    label="属性名称"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    label="操作">
                    <template v-slot="manyarr">
                      <el-button type="primary" icon="el-icon-edit" circle @click="revisemanyclick(manyarr.row)"></el-button>
                      <el-button type="danger"   icon="el-icon-delete" circle  @click="deletecanshu(manyarr.row)"></el-button>
                    </template>
                  </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="配置管理" name="second">
              <el-button type="danger"   @click="addonly">添加静态参数</el-button>
                  <el-table
                  :data="onlyoptions"
                  style="width: 100%">
                  <el-table-column
                    prop="attr_id"
                    label="#"
                    width="90">
                  </el-table-column>
                  <el-table-column
                    prop="attr_name"
                    label="属性名称"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="attr_vals"
                    label="属性值">
                  </el-table-column>
                   <el-table-column
                    label="操作">
                    <template v-slot="onlyarr">
                      <el-button type="primary" icon="el-icon-edit" circle @click="reviseonlyclick(onlyarr.row)"></el-button>
                      <el-button type="danger"   icon="el-icon-delete" circle @click="deleteonly(onlyarr.row)"></el-button>
                    </template>
                  </el-table-column>
                </el-table>
            </el-tab-pane>
          </el-tabs>
      </el-card>

      <!-- 添加动态参数 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose">
        <el-form ref="form" :model="addpush" label-width="80px">
          <el-form-item label="参数名称">
            <el-input v-model="addpush.attr_name"></el-input>
          </el-form-item>
          <el-form-item label="属性名称">
            <el-input v-model="addpush.attr_vals"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onsubmit">确 定</el-button>
        </span>
      </el-dialog>

       <!-- 添加动态参数 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisibleonly"
        width="50%"
        :before-close="handleClose">
        <el-form ref="form" :model="onlyform" label-width="80px">
          <el-form-item label="静态参数">
            <el-input v-model="onlyform.attr_name"></el-input>
          </el-form-item>
          <el-form-item label="静态属性">
            <el-input v-model="onlyform.attr_vals"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleonly = false">取 消</el-button>
          <el-button type="primary" @click="onsubmit1">确 定</el-button>
        </span>
      </el-dialog>

       <!-- 编辑静态参数 -->
      <el-dialog
        title="提示"
        :visible.sync="revisedialogVisibleonly"
        width="50%"
        :before-close="handleClose">
        <el-form ref="form" :model="onlyform" label-width="80px">
          <el-form-item label="静态参数">
            <el-input v-model="reviseform.attr_name"></el-input>
          </el-form-item>
          <el-form-item label="静态属性">
            <el-input v-model="reviseform.attr_vals"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="revisedialogVisibleonly = false">取 消</el-button>
          <el-button type="primary" @click="onsubmitrevise">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import {getcategories,getcategoriesmany,getcategoriesonly,deletecategories,addcategories,deleteattrid,addpush,getonly,addpushonly,deleteattridonly,reviseonly} from "network/goodlist"

export default {
  name:"classify",
  created () {
     // 请求动态商品分类的数据
    getcategories().then(res=>{
       this.options=res.data.data
    })


  },
  data () {
    return {
          options:[],
          value:[],
          // 页面展示的
          defaultprop:{
            label:"cat_name",
            value:"cat_id",
            children:"children",
            expandTrigger: 'hover'
          },
          manyarr:[],
          onlyarr:[],
          //展示的tabs项的name
          activeName:"first",
          inputVisible: false,
          inputValue:"",
          //动态数据
          //删除数据
          deleteform:{
            attr_name:"",
            attr_sel:"many",
            attr_vals:""
          },
          //添加数据
          addform:{
            attr_name:"",
            attr_sel:"many",
            attr_vals:""
          },
          dialogVisible:false,
          //添加动态参数按钮
          addpush:{
            attr_name:"",
            attr_sel:"many",
            attr_vals:""
          },
          // 下面都是静态参数
          onlyoptions:[],
          onlyform:{
            attr_name:"",
            attr_sel:"only",
            attr_vals:""
          },
          dialogVisibleonly:false,
          // 编辑静态参数的值
          reviseform:{
            attr_name:"",
            attr_sel:"only",
            attr_vals:"",
            attr_id:""
          },
          revisedialogVisibleonly:false
    }
  },
  methods: {
      handleChange(value){
         console.log(value)
         this.getcategoriesmany()
         this.getcategoriesonly()
      },

      //调用动态数据
      getcategoriesmany(){
          //获取动态数据
              getcategoriesmany(this.value[2]).then(res=>{
                this.manyarr=res.data.data
                // 把获取来的动态数据里面的attr_vals变成[]数组类型
                this.manyarr.forEach(item=>{
                   item.attr_vals=item.attr_vals.lenth==0 ? [] : item.attr_vals.trim().split(",")
                })
                // console.log(this.manyarr)
              })
      },

      // 调用静态数据
      getcategoriesonly(){
           // 请求静态参数
          getcategoriesonly(this.value[2]).then(res=>{
            this.onlyoptions=res.data.data
            console.log(res)
            })
      },
      handleClick(tab, event) {

      },

      //点击关闭的时候触发 propsarr是attr_vals的值 propsrow这一行的全部数据 tag 点关闭的数据值
       handleClose(propsarr,propsrow,tag) {
        propsarr.splice(propsarr.indexOf(tag), 1);
        this.deleteform.attr_name=propsrow.attr_name
        this.deleteform.attr_vals=propsrow.attr_vals.join(",")
        console.log(this.deleteform)
     
        // 发送删除动态参数的网络请求
        deletecategories(this.value[2],propsrow.attr_id,this.deleteform).then(res=>{
          console.log(res)
         
        })
        console.log(this.manyarr)
      },

      //点击新增按钮触发
      showInput(propsrow) {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
 
      //按回车键触发
      handleInputConfirm(propsrow) {
        console.log(propsrow.attr_vals)
        let inputValue = this.inputValue;
        // inputvalue:是用户输入的字符
        if (inputValue) {
            propsrow.attr_vals.push(inputValue)
        }
        this.addform.attr_name=propsrow.attr_name
        this.addform.attr_vals=propsrow.attr_vals.join(",")
        //发送添加动态参数网络请求
        addcategories(this.value[2],propsrow.attr_id,this.addform).then(res=>{
             console.log(res)
        })
        this.inputVisible = false;
        this.inputValue = '';
      },

      // 删除动态参数
      deletecanshu(manyarrrow){
            deleteattrid(this.value[2],manyarrrow.attr_id).then(res=>{
              this.$message.success("删除成功")
              setTimeout(()=>{
                this.getcategoriesmany()
              },500)
              
            })
      },
      //添加动态参数
      addmany(){
          if(this.value.length>2){
             this.dialogVisible=true
          }else{
              this.$message.error("请先选择商品名称")
          }
      },
     // 发送增加动态参数的网络请求
      onsubmit(){
          addpush(this.value[2],this.addpush).then(res=>{
            console.log(res)
            setTimeout(()=>{
                 this.getcategoriesmany()
            })
           
          })
          this.dialogVisible=false
      },

      //发送添加静态参数
      addonly(){
          this.dialogVisibleonly=true
         
      },
      onsubmit1(){
          addpushonly(this.value[2],this.onlyform).then(res=>{
            console.log(res)
          })
           setTimeout(()=>{ 
                  this.getcategoriesonly()
               },200)
          // 清空输入框内容
          for(let k in this.onlyform){
             this.onlyform[k]=""
          }

          this.dialogVisibleonly=false
      },
      
      //删除静态属性 
      deleteonly(onlyarrrow){
            deleteattridonly(this.value[2],onlyarrrow.attr_id).then(res=>{
               console.log(res)
               setTimeout(()=>{ 
                  this.getcategoriesonly()
               },100)
              
            })
      },
      //修改静态参数的值
      reviseonlyclick(onlyarrrow){
          this.reviseform.attr_id=onlyarrrow.attr_id
          this.revisedialogVisibleonly=true
      },
      onsubmitrevise(){
         console.log(this.reviseform)
        //  编辑后发送网络请求 
        reviseonly(this.value[2],this.reviseform.attr_id,this.reviseform).then(res=>{
          console.log(res)
          setTimeout(()=>{ 
                  this.getcategoriesonly()
               },100)
          // 清空输入框内容
          for(let k in this.reviseform){
              this.reviseform[k]=""
          }
        })
        this.revisedialogVisibleonly=false
      },
      //修改动态参数的值
      revisemanyclick(manyarrrow){

      }
  }
  
}

</script>
<style  scoped>
.header{
  margin-bottom: 20px;
}
.smallbox{
  margin-top: 20px;
}
.tabs{
  margin-top: 20px;
}
</style>